<template>
  <div>
      <div style="text-align:right;margin-bottom:5px;" >
          <el-button  v-if="canModify" type="warning" @click.native="toAddContractFile">添加合同文件</el-button>
          <el-button v-if="canSign" type="primary" size="mini" @click.native="toInitiateSigning">发起签署</el-button>
      </div>
      <el-table :data="contractFileList" ref="contractFileTableRef">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="合同号" prop="contractNo" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
                <el-link type="primary" @click="toPreview(scope.row,false)">{{scope.row.contractNo}}</el-link>
            </template>
           </el-table-column>
        <el-table-column label="合同文件名称" prop="contractFileName" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column label="合同模板" prop="contractTemplateName"  show-overflow-tooltip></el-table-column>
        <el-table-column label="所属订单" width="120" prop="orderNo">
            <template slot-scope="scope">
                <el-link type="primary" @click="toOrder(scope.row)">{{scope.row.orderNo}}</el-link>
            </template>
        </el-table-column>
        <el-table-column label="签署方确认" width="120">
              <template slot-scope="scope">
                   {{contractIsConfirmSinger(scope.row.isConfirmSinger)}}
              </template>
        </el-table-column>
        <el-table-column label="合同是文件确认" width="120">
              <template slot-scope="scope">
                   {{contractIsConfirmFile(scope.row.isConfirmFile)}}
              </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" fixed="right"  v-if="canModify|| (param && param.status===5)"  align="center" width="200" >
            <template slot-scope="scope">
              <div class="wp-buttions" v-if="canModify">
                <el-link  type="warning" size="mini" @click.native="toEditSinger(scope.row)">签署方确认</el-link>
                <el-link  type="primary"  size="mini" @click="toPreview(scope.row,true)">合同确认</el-link>
                <el-dropdown @command="handleCommand($event,scope.row)">
                  <span  style="cursor: pointer;color: #409EFF;">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-edit" command="edit">编 辑</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-delete" command="delete">删 除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div v-else-if="param && param.status===5 && scope.row.fileUrl">
                  <el-button type="success"  v-downLoad="scope.row.fileUrl">下载已签合同</el-button>
              </div>
            </template>
        </el-table-column>
    </el-table>
        <ContractFileSigner v-if="visible" :visible.sync="visible" title="合同文件签署方确认" :contractFileInfo="contractFileInfo" :data="[contractInfo,contractTemplateInfo]"  />
        <ContractSigning v-if="visibleInitiateSigning" :visible.sync="visibleInitiateSigning" title="发起合同签署" :contractFiles="selectContractFiles" :contractInfo="contractInfo" />
        <CreatePanel v-if="visibleCreate" :visible.sync="visibleCreate" title="添加合同文件"  :data="contractInfo" @afterSave="getContractFileList(param.contractCode)"/>
        <Sale-order-detail-panel
            v-if="showSalesOrderDetail"
              sourceType="contractFile"
             :show.sync="showSalesOrderDetail"
             :data.sync="contractInfo"/>
        <PdfPreview  :visible.sync="visiblePdf" :canModify="previewCanModify"  :param.sync="contractFileInfo" />
        <el-dialog width="38%" title="编辑合同文件" append-to-body :visible.sync="visibleEdit">
              <el-form :model="contractFileInfo" label-width="120px">
                <el-form-item label="合同文件名称" prop="contractFileName" :rules="{required: true, trigger: 'blur', message: '不能为空'}">
                  <el-input class="wp-form-280" clearable v-model.trim="contractFileInfo.contractFileName" placeholder="合同文件名称"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input class="wp-form-280" clearable v-model.trim="contractFileInfo.remark" type="textarea" placeholder="备注"></el-input>
                </el-form-item>
              </el-form>
              <div style="text-align:center;margin-top:10px">
                <el-button type="" @click="visibleEdit=false">取消</el-button>
                <el-button type="success" @click.native="editContractFile">保存</el-button>
              </div>
        </el-dialog>
          <div class="contract-flow-desc">合同签署步骤</div>
          <el-steps  simple>
            <el-step title="签署方确认" icon="el-icon-edit"></el-step>
            <el-step title="合同确认" icon="el-icon-upload"></el-step>
            <el-step title="（审批通过）发起签署" icon="el-icon-picture"></el-step>
         </el-steps>
  </div>
</template>
<script>
import SaleOrderDetailPanel from '@/views/eims/sales/order/components/DetailPanel'
import PdfPreview from './pdf/Preview'
import ContractSigning from './signing'
import Mixins from '../mixins'
import ContractFileSigner from './ContractFileSigner'
import CreatePanel from '../CreatePanel'
import downLoad from '@/directive/down-load-url'
export default {
  mixins: [Mixins],
  directives: {downLoad},
  props: {
    canModify: { type: Boolean, default: false },
    canSign: { type: Boolean, default: false },
    param: {type: Object,
      default: () => {
        return {}
      }}
  },
  watch: {
    param: {
      handler (val) {
        this.contractInfo = {...val}
      },
      immediate: true
    }
  },
  components: {ContractFileSigner, CreatePanel, SaleOrderDetailPanel, PdfPreview, ContractSigning},
  data () {
    return {
      visible: false,
      visibleCreate: false,
      visibleEdit: false,
      visibleInitiateSigning: false,
      visiblePdf: false,
      showSalesOrderDetail: false,
      contractInfo: {},
      contractFileInfo: {},
      contractTemplateInfo: {},
      contractFileList: [],
      selectContractFiles: [],
      previewCanModify: false,
      downLoadUrl: ''
    }
  },
  mounted () {
    this.getContractFileList(this.param.contractCode)
  },
  methods: {
    toAddContractFile () {
      this.visibleCreate = true
    },
    toEditSinger (row) {
      this.contractFileInfo = row
      this.contractTemplateInfo = row.contractTemplateInfo || {}
      this.visible = true
    },
    toPreview (row, previewCanModify = false) {
      this.contractFileInfo = row
      this.visiblePdf = true
      this.previewCanModify = previewCanModify && this.canModify
    },
    toInitiateSigning () {
      const selections = this.$refs.contractFileTableRef.selection
      if (!selections || selections.length <= 0) {
        this.$msgBox.error('请选择合同文件')
        return
      }
      this.selectContractFiles = [...selections]
      this.visibleInitiateSigning = true
    },
    toOrder (row) {
      this.showSalesOrderDetail = true
    },
    handleCommand (command, row) {
      if (command === 'delete') {
        this.delContractFile(row)
      } else if (command === 'edit') {
        this.visibleEdit = true
        this.contractFileInfo = {...row}
      } else if (command === 'download') {
        this.downloadContractFile(row)
      }
    },
    delContractFile (row) {
      this.$msgBox.confirm('确认删除合同文件【' + row.contractFileName + '】', () => {
        this.requestOption('deleteContractFile', row.contractFileCode, res => {
          if (res.code === 0) {
            this.getContractFileList(this.param.contractCode)
          }
        })
      })
    },
    editContractFile () {
      const params = {}
      params.contractFileCode = this.contractFileInfo.contractFileCode
      params.contractFileName = this.contractFileInfo.contractFileName
      params.remark = this.contractFileInfo.remark
      this.requestOption('updateContractFile', params, res => {
        if (res.code === 0) {
          this.visibleEdit = false
          this.getContractFileList(this.param.contractCode)
        }
      })
    },
    getContractFileList (contractCode) {
      this.requestOption('getContractFileList', contractCode, res => {
        this.contractFileList = res.data || []
      })
    },
    contractIsConfirmSinger (isConfirmSinger) {
      return isConfirmSinger && isConfirmSinger === true ? '已确认' : '未确认'
    },
    contractIsConfirmFile (isConfirmFile) {
      return isConfirmFile && isConfirmFile === true ? '已确认' : '未确认'
    }
  }
}
</script>

<style lang="scss" scoped>
.contract-flow-desc{
    margin: 10px 0;
    font-size: 16px;
    font-weight: 600;
}
.wp-buttions{
  display:flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>
